<template>
	<view class="details pB50">
				
		<view class="details-message pT10">
			<p class="bold pB5">访客信息</p>
			<view class="bg_white">			
			
			<div class="details-top pT10 bg_white">
				<image class="w100 h100 block bg_white" :src="detailshow.vister_personimg | personimg" mode="aspectFill"></image>
			</div>
			</view>
			<view class="details-message-name">访客姓名：{{detailshow.vister_name}}</view>
			<view class="details-message-sex" v-if="detailshow.vister_sex==1">访客性别：男</view>
			<view class="details-message-sex" v-if="detailshow.vister_sex==2">访客性别：女</view>
			<view class="details-message-number" v-if="detailshow.vister_identitycard | isidcard">身份证号：{{detailshow.vister_identitycard | isidcard}}</view>
			<view class="details-message-phone">访客电话：{{detailshow.vister_mobile}}</view>
			<view class="details-message-phone" v-if="detailshow.carnumber">车牌号码：{{detailshow.carnumber}}</view>
			<view class="intervieweeInformation-reason">来访缘由：{{detailshow.app_reson}}</view>
			
		</view>
		<view class="intervieweeInformation pT10">
			<p class="bold pB5">受访人信息</p>
			<view class="intervieweeInformation-company">受访公司：{{detailshow.app_company_name}}</view>
			<view class="intervieweeInformation-location">受访部门：{{detailshow.app_address}}</view>
			<view class="intervieweeInformation-name">受访人员：{{detailshow.app_user_name}}</view>
			<view class="intervieweeInformation-name">电话号码：{{detailshow.app_mobile}}</view>
			<view class="intervieweeInformation-time" v-if="detailshow.app_visittime">预约开始：{{retime(detailshow.app_visittime)}}</view>
			<view class="intervieweeInformation-time" v-if="detailshow.app_endvisittime">预约结束：{{retime(detailshow.app_endvisittime)}}</view>
			
		</view>
		<view class="statusInformation pT10">
			<p class="bold pB5">邀请动态</p>
			<view class="status">
				<view class="status-information">到访状态：{{detailshow.m_tips}}</view>
				<view class="" v-if="time_streamlist.length != 0">
					<view class="status-information pB5 " v-for="item in time_streamlist"
						:class="item.type=='2'?'statusEND':''"
						v-if="item.tips=='提交时间'  || item.tips=='受访人员' || item.tips=='访客确认' || item.tips=='访客姓名' || item.tips=='取消原因' || item.tips=='查看时间'">
						<view class="left">{{item.tips}}：</view>
						<view class="right">{{item.value}}</view>
					</view>
				</view>
		
			</view>
		</view>	
		<view class="statusInformation pT10" v-if="time_streamlist[7]">
			<p class="bold pB5">来访动态</p>
			<view class="status">
				<!-- <view class="status-information">到访状态：{{appointmentDetails.m_tips}}</view> -->
				<view class="" v-if="time_streamlist.length != 0">
					<view class="status-information pB5 " v-for="item in time_streamlist"
						:class="item.type=='2'?'statusEND':''"
						v-if="item.tips=='保安扫码' || item.tips=='保安人员' || item.tips=='确认离开' ||item.tips=='取消进入' || item.tips=='取消缘由'">
						<view class="left">{{item.tips}}：</view>
						<view class="right">{{item.value}}</view>
					</view>
				</view>	
			</view>		
		</view>
		
		<view class="statusInformation pT10" v-if="detailshow.healthy_img">
			<p class="bold pB5">点击查看该访客粤康码图片</p>
			<view class="status bg_white"  style="padding: 10px;">									
					<view class="user-imgshow" @click="previewImg(detailshow.healthy_img)">
						<image  :src="detailshow.healthy_img" style="width: 200upx; height: 200upx; background-color:  #ebebeb;"/>
					</view>
			</view>
		</view>
		
		<!-- <view class="statusInformation pT10" v-if="time_streamlist[10].tips=='扫码接待' || time_streamlist[9].tips=='扫码接待']time_streamlist[10].tips=='扫码接待' || time_streamlist[9].tips=='扫码接待'ime_streamlist[9].tips=='扫码接待' time_streamlist[10].tips=='扫码接待' || time_streamlist[9].tips=='扫码接待'.tips=='扫码接待'"> -->
		<view class="statusInformation pT10" v-if="time_streamlist[10]">
			<p class="bold pB5">到访动态</p>
			<view class="status">
				<!-- <view class="status-information">到访状态：{{appointmentDetails.m_tips}}</view> -->
				<view class="" v-if="time_streamlist.length != 0">
					<view class="status-information pB5" v-for="item in time_streamlist"
						:class="item.type=='2'?'statusEND':''" v-if="item.tips=='扫码接待' || item.tips=='接待人员' || item.tips=='接待完成' ">
						<view class="left">{{item.tips}}：</view>
						<view class="right">{{item.value}}</view>
					</view>
				</view>
		
			</view>
		
		</view>
		<!-- <view class="statusInformation pT10" >
					<p class="bold pB5">到访信息</p>
					<view class="status">
						<view class="status-information" v-if="retime(app_info.createtime)">
							<view class="left">{{retime(app_info.createtime)?retime(app_info.createtime):''}}</view>
							<view class="right">发起时间</view>
						</view>
						<view class="status-information" v-if="retime(app_info.arrivetime)">
							<view class="left">{{retime(app_info.arrivetime)?retime(app_info.arrivetime):''}}</view>
							<view class="right">到达门口</view>
						</view>
						<view class="status-information" v-if="retime(app_info.refusetime)">
							<view class="left">{{retime(app_info.refusetime)?retime(app_info.refusetime):''}}</view>
							<view class="right">门卫不接受</view>
						</view>
						<view class="status-information" v-if="retime(app_info.passtime)">
							<view class="left">{{retime(app_info.passtime)?retime(app_info.passtime):''}}</view>
							<view class="right">门卫放行</view>
						</view>
						<view class="status-information"v-if="retime(app_info.meettime)">
							<view class="left">{{retime(app_info.meettime)?retime(app_info.meettime):''}}</view>
							<view class="right">到达见面地点</view>
						</view>
						<view class="status-information" v-if="retime(app_info.leavetime)">
							<view class="left">{{retime(app_info.leavetime)?retime(app_info.leavetime):''}}</view>
							<view class="right">完成-离开时间</view>
						</view>
					</view>
				</view> -->
		<!-- <view class="btn-button" v-if="showtype&&showtype=='2'&&app_info.arrive_status==2&&besignedchanger">
			<view class="cancel" @click="BeSigned()">代访客确认到达</view> 			
		</view> -->
		<!-- 底部导航 -->
		<footernav pagePath='main'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	
	import {userinfovisit} from '../../common/api/visiter.js'; //引进requst方法
	import {arrivearrive_info,appointmentinfo,appointmentaccept,appointmentrefuse,arriveconfirm} from '../../common/api/appointment.js';
	import {timestampToTime}  from '@/common/common.js'
	export default {
		data() {
			return {
				companyid:"",
				detaildata:[],
				id:"",
				departname:"",
				detailshow:"",
				showtype:"",
				app_info:[],
				time_streamlist:[],
				meetingid:'',
				besignedchanger:true
			};
		},
		methods: {
			/*访客代签*/
			previewImg(logourl) {
				if(logourl){
					let _this = this;
					let imgsArray = [];
					imgsArray[0] = logourl
					uni.previewImage({
						current: 0,
						urls: imgsArray
					});
				}
			},
			BeSigned(){

				arriveconfirm({
					/*访客uid*/
					uid:this.app_info.vister_uid,
					deptid:this.app_info.deptid,
					companyid:this.app_info.companyid,
					url:''
					
				}).then(res=>{

					let toasttips = '代签成功'
					if(res.data.code == 400){
						toasttips = '信息已确认,请勿重复操作'
					}
					
					this.app_info.meettime =  Date.parse(new Date())/1000;
				
					uni.showToast({
					    title: toasttips,
					    duration: 2000,
						icon:'none'
					});
					this.besignedchanger = false
				})
			},
			/*转换时间戳*/
			retime(time){
				if(time==null){
					return false
				}
				return timestampToTime(time)
			},
			showuserid(){
				arrivearrive_info({meetingid:this.meetingid}).then(res=>{
					console.log(res)
					this.detailshow=res.data.data;
					this.time_streamlist=res.data.data.time_stream
					// console.log(res)
				})
			},
			acceptadd(){
				/*appointment id*/
				appointmentaccept({id:this.app_info.appointmentid,auditing:'1'}).then(res=>{
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
					if(res.data.code=='200'){
						this.showtype='2'
					}
				})
			},
			
			refuseadd(){
				appointmentaccept({id:this.app_info.appointmentid,auditing:'0'}).then(res=>{
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
					if(res.data.code=='200'){
						this.showtype='2'
					}
				})
			},
		},
		onLoad(event) {
			// return
			try {
				this.detaildata = JSON.parse(decodeURIComponent(event.detaildata));
				console.log(this.detaildata);
			} catch (error) {
				this.detaildata = JSON.parse(event.detaildata);
				console.log(this.detaildata);
			}
			/*app-id*/
			this.id = this.detaildata.id;	
			this.showtype=this.detaildata.showtype;
			this.app_info = this.detaildata.appinfo;
			this.meetingid= this.detaildata.appinfo.meeting_id;	
			this.showuserid();
		},
	}
</script>

<style lang="scss" scoped>
	.statusInformation:last-child{
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
.details {
	color: rgba(80, 80, 80, 1);
	font-size: 15px;
	width: 100%;
	background-color: #efeff4;
	.details-top {
		width: 80px;
		height: 80px;
		left: 148px;
		top: 105px;
		font-size: 117px;
		color: rgba(153, 153, 153, 1);
		// border: 1px solid;
		margin: auto;
		margin-top: 10px;
		image{
			border-radius: 50%;
		}
	}
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
	.intervieweeInformation {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
	.statusInformation {
		width: 95%;
		margin: auto;	
		.status-information {
			display: flex;
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			.right {
				margin-left: 0px;
			}
		}
		.statusEND{padding-bottom:10px;border-bottom: 1px solid #9e9e9e;}
	}
	.btn-button {
		display: flex;
		width: 90%;
		margin: auto;
		justify-content: space-around;
		margin: 20px;
		uni-view {
			color: rgba(255, 255, 255, 1);

			border-radius: 18px;
			font-size: 14px;
			padding: 5px 20px;
		}
		.cancel {
			background-color: rgba(212, 48, 48, 1);
		}
		.Approved {
			background-color: rgba(42, 130, 228, 1);
		}
		.Confirm {
			background-color: rgba(128, 128, 128, 1);
		}
	}
}
</style>